import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';

import { TopHeader } from '@src/components';

import './index.scss'
import ImageLoader from '@src/styles/ImageLoader';


@inject('chapterListStore')
@inject('baseStore')
@observer
class ChapterListPage extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			activeIndex: -1
		};

		// 为了在回调中使用 `this`，这个绑定是必不可少的
		this.handleClick = this.handleClick.bind(this);
	}

	componentDidMount() {



		this.props.baseStore.topHeader.show = true;
		this.props.baseStore.topHeader.backTo = '/courseList';

		var directoryId = this.props.match.params.directoryId;


		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "page_change",
				content: `/chapterList/${directoryId}`
			}
		};
		//给服务端发送 sendMsg事件名的消息
		this.props.baseStore.socketData.socket.emit("teach_app_to_server", data);

		// this.props.chapterListStore.GetClassListById(directoryId || '44DA6138-CB3F-4640-B500-D47BD16BD6ED');

		this.props.chapterListStore.GetClassListById(directoryId || '44DA6138-CB3F-4640-B500-D47BD16BD6ED');
		this.props.chapterListStore.GetCurrentDirectoryEntity(directoryId);

	}

	componentWillUnmount = () => {
		this.setState = (state, callback) => {
			return;
		};
	}

	handleClick = (index) => {
		this.setState({
			activeIndex: index
		})

		var DirectoryID = this.props.chapterListStore.pulishList[index].DirectoryID;
		this.props.chapterListStore.GetGradeListById(DirectoryID);
	}

	toShowPage = (item) => {


		this.props.baseStore.topHeader.backTo = '/chapterList/' + this.props.match.params.directoryId;


		console.log(item, "=========item============");
		var directoryId = item.DirectoryID;

		this.props.chapterListStore.lastEntryChapterID = directoryId;

		//课程 有ID
		//即查即练  需传入哪些字  那就放到统一的地方
		this.props.history.push('/showCourse/' + directoryId);
	}

	render() {


		return (
			<div className="ChapterListPage page_container animated fadeInDown  fast">

				<div className="main_left_bottom"></div>
				<div className="main_right_bottom"></div>

				<div className="list_container">

					<div className="list_container_banner">
						<div className="list_container_banner_text">
							{this.props.chapterListStore.currentCourseItem ? this.props.chapterListStore.currentCourseItem.DirectoryName : ''}
						</div>
					</div>

					<div className="list_container_left">

						{
							this.props.chapterListStore.chapterList.slice(0, 9).map((item, index) => {
								var cls = this.props.chapterListStore.lastEntryChapterID == item.DirectoryID ? "each_line active" : "each_line";
								return (
									<div key={index} className={cls} onClick={() => this.toShowPage(item)}>
										<div directoryId={item.DirectoryID} className="chapter_name">{item.DirectoryName}</div>
										<div className="line"></div>
										<div className="right_icon"></div>
									</div>
								)
							})
						}



					</div>
					<div className="list_container_right">
						{
							this.props.chapterListStore.chapterList.slice(9, this.props.chapterListStore.chapterList.length).map((item, index) => {
								var cls = this.props.chapterListStore.lastEntryChapterID == item.DirectoryID ? "each_line active" : "each_line";
								return (
									<div key={index} className={cls} onClick={() => this.toShowPage(item)}>
										<div className="chapter_name">{item.DirectoryName}</div>
										<div className="line"></div>
										<div className="right_icon"></div>
									</div>
								)
							})
						}
					</div>

				</div>


			</div>
		);
	}
}

export default ChapterListPage;